<script>
import EmojiIcon from '@/assets/icons/emoji.png'
import RedEnvelopeIcon from '@/assets/icons/red-envelope.png'
import ImageIcon from '@/assets/icons/image.png'
import MoreIcon from '@/assets/icons/more.png'
import VoiceIcon from '@/assets/icons/voice.png'

export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 34
    }
  },
  components: {
  },
  computed: {
    icons: () => ({
      'emoji': EmojiIcon,
      'red-envelope': RedEnvelopeIcon,
      'image': ImageIcon,
      'more': MoreIcon,
      'voice': VoiceIcon
    })
  },
  data() {
    return {
    }
  },
  methods: {
  },
}
</script>

<template>
  <div class="chat-icon" :style="{
    width: `${size}px`,
    height: `${size}px`,
  }">
    <img :src="icons[type]" alt="">
  </div>
</template>

<style lang="less" scoped>
.chat-icon {
  >img {
    width: 100%;
    height: 100%;
  }
}
</style>
